import 'cube.css/src/scss/neat.scss'
import 'static/font/iconfont.css'
import 'element-ui/lib/theme-default/index.css'
import './album.scss'
import '@/base/scss/common.scss'
import Vue from 'vue'
import ElementUI from 'element-ui'
import UnifyHeader from 'components/header/header'
import UnifyFooter from 'components/footer/footer'
import Suspension from 'components/suspension/suspension'
import Api from '@/api.js'
import Utils from 'components/component/util'
import mixins from '@/mixins'
import filters from '../../filter.js'
import {DEVELOPMENT, PRODUCTION} from "../../config"

let apiHost = process.env.NODE_ENV === 'development' ? DEVELOPMENT : PRODUCTION

Vue.mixin(mixins)
Vue.use(ElementUI)

Vue.use(Utils)  // 工具函数

//eslint-disable-next-line no-new
new Vue({
  el: '#app',
  filters,
  data: {
    showSuspensionHeight: 0, // 显示悬浮组件的高度
    customizationItem: 'border',
    picturePrefix: `http://${apiHost.IMAGE_API_HOST}/`,
    frameColor: [], //颜色
    frameSize: [], //框画的尺寸
    framePage: [], //页数
    skuCode: '', //用来取价钱的sku
    price: '', //框画的价钱
    previewImageUrl: '', //框形预览图
    editImageUrl: '', //编辑框背景图
    skuId: '', //当前产品的skuId
    templateCode: '',
    imgShowBool: false,
    color: 0,
    size: 0,
    page: 1,
    cache: {}
  },
  methods: {
    suspendPackUp: function () {
      let $el = this.$refs.suspend.$el
      $el.style.height = '38px'
      setTimeout(() => {
        $el.removeAttribute('style')
      }, 20)
    },
    suspendPullDown: function (type) {
      this.customizationItem = type
      let $el = this.$refs.suspend.$el
      $el.style.height = '154px'
    },
    /**
     * 更新sku
     */
    updataSkuData(imgShowBool) {
      if (imgShowBool) {
        this.dynamicAlterUrl({
          size: this.size,
          color: this.color
        })
      }
      this.skuCode = [
        this.getFromSession('category'),
        this.frameSize[this.size].code,
        this.framePage[this.page].code,
        this.frameColor[this.color].code
      ].join('.')
      let dataFill = (data) => {
        this.previewImageUrl = data.previewImageUrl //框形预览图
        this.editImageUrl = data.editImageUrl //编辑框背景图
        this.price = data.price
        this.skuId = data.skuId
        this.templateCode = data.templateCode
        if (imgShowBool) {
          this.imgShowBool = imgShowBool
        }
      }
      if (this.cache[this.skuCode]) {
        dataFill(this.cache[this.skuCode])
        return
      }
      Api.sku.querySku({
        category: this.getFromSession("category"),
        parameter: this.skuCode
      }).then(res => {
        this.cache[this.skuCode] = res.data
        dataFill(res.data)
      })
    },
    /*开始定制*/
    startCustom() {
      if (!this.imgShowBool) {
        this.$message({
          showClose: true,
          iconClass: 'atrup_Message',
          message: '请先选择您需要定制的尺寸和颜色 !',
          type: 'success'
        })
        return
      }
      let nowColorName = this.frameColor[this.color].name
      let nowSize = this.frameSize[this.size].code
      if (localStorage.getItem("userDbId")) {
        let editCnfName = ''
        if (nowSize === '342X342') {
          editCnfName = 'pc_huace_342-342_56_single'
        }
        if (nowSize === '342X250') {
          editCnfName = 'pc_huace_342-250_56_single'
        }
        if (nowSize === '250X342') {
          editCnfName = 'pc_huace_250-342_56_single'
        }
        if (nowSize === '342X500') {
          editCnfName = 'pc_huace_342-500_72_single'
          this.templateCode = 'pc_huace_342-500_72'
        }
        let jsons = {
          colorName: nowColorName,
          name: `画册.${nowColorName}.${nowSize}.${this.framePage[this.page].code}页`,
          skuCode: this.skuCode,
          category: this.getFromSession('category'),
          price: this.price,
          skuId: this.skuId,
          size: nowSize,
          titleName: '画册',
          tplCode: this.templateCode,
          editCnfName: editCnfName,
          eqTitle: `画册.${nowSize}`
        }
        console.log(jsons)
        let obj = JSON.parse(sessionStorage.getItem("urlQuery"))
        obj.tplCode = this.templateCode
        sessionStorage.setItem("urlQuery", JSON.stringify(obj))
        sessionStorage.setItem('bbsSlsectDate', JSON.stringify(jsons))
        sessionStorage.setItem('titleName', '画册')
        location.href = '/album/huaceEdit'
      } else {
        this.setUrlCallback()
      }
    },
    _getFrameCustomList: function () {
      let _self = this
      let listKeys = ['frameColor', 'framePage', 'frameSize']
      Api.sku.queryAttributes({category: this.getFromSession("category")}).then(res => {
        if (!res) {
          return
        }
        res.data.attributes.forEach((item, index) => {
          _self[listKeys[index]] = item.attributeValues
        })
        // 检查url参数中是否指定默认值
        this.size = +this.getQueryString('size', 0)
        this.color = +this.getQueryString('color', 0)
        setTimeout(function () {
          this.updataSkuData(this.size || this.color)
        }.bind(this), 20)
      })
    }
  },
  watch: {
    size: function (value) {
      this.page = value === 3 ? 0 : 1
      this.updataSkuData(true)
    },
    color: function () {
      this.updataSkuData(true)
    },
    imgShowBool: function () {
      this.updataSkuData(true)
    }
  },
  mounted() {
    let that = this
    sessionStorage['urlQuery'] = JSON.stringify({
      category: this.getQueryString('category', 'huace'),
      defDbId: this.getQueryString('defDbId', '9de2973d-3487-4b05-b556-b9b92dd75493')
    })
    this._getFrameCustomList()
    this.$nextTick(function () {
      that.showSuspensionHeight = that.$refs.showSuspensionFlag.offsetTop
    })
  },
  created: function () {
    this.checkWebpFeature('lossy', function (feature, isSupport) {
      if (isSupport) {
        require('./background-webp.scss')
      } else {
        require('./background-png.scss')
      }
    })
    document.body.style.cssText = 'opacity:1;'
  },
  components: {
    UnifyHeader,
    UnifyFooter,
    Suspension
  }
})
